<template>
	<view class="wrapper">
		<view class="top_box">
			<image src="../../static/user/ueser-pugongying.png" mode="aspectFill" class="inviter_head"></image>
			<view class="inviter f28 c666 content">蒲公英</view>
			<view class="content f28 c666">想邀请1位朋友加入群聊</view>
			<view class="content f28 c666">想进群聊天</view>
		</view>
		<view class="bot_box">
			<view class="user_box">
				<image src="../../static/user/user-qingxu.png" mode="aspectFill" class="user_head"></image>
				<view class="user_name content f28 c666">
					半面情绪
				</view>
			</view>
		</view>
		<button type="default" class="invite">确定邀请</button>
	</view>
</template>

<script>
export default {
	data() {
		return {};
	},
	methods: {}
};
</script>

<style>
	.wrapper{
		background-color: #F3F3F3;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.inviter_head{
		width:140rpx;
		height:140rpx;
		border-radius:50%;
		margin-top: 70rpx;
	}
	.top_box{
		width: 680rpx;
		height: 556rpx;
		text-align: center;
		border-bottom:1rpx solid #E0E0E0;
	}
	.content{
		line-height: 68rpx;
	}
	.user_head{
		width:116rpx;
		height:120rpx;
		border-radius:50%;
		margin-top: 50rpx;
	}
	.bot_box{
		width: 680rpx;
	}
	.invite{
		width:690rpx;
		height:80rpx;
		background:rgba(2,151,254,1);
		border-radius:4rpx;
		margin-top: 54rpx;
		color: #FFFFFF;
		font-size:30rpx;
		font-weight:500;
		color:rgba(255,255,255,1);
	}
</style>
